<template>
  <section class="training">
    <div class="container">
      <template v-for="i in 15" :key="i">
        <div
          class="title-desc"
          v-if="trainingData.rows[i - 1]"
          @click="handleCilckTrainingItem(trainingData.rows[i - 1].id)"
        >
          <div class="desc-container">
            <div class="desc">
              <img
                :src="'http://' + ip + trainingData.rows[i - 1].declareCover"
                alt=""
                style="width: 100%; height: 100%"
              />
            </div>
          </div>
          <div class="title">{{ trainingData.rows[i - 1].declareTitle }}</div>
        </div>
        <div class="item" v-else></div>
      </template>
    </div>
    <footer class="training-footer">
      <el-pagination
        v-model:currentPage="currentPage"
        :page-size="15"
        size="small"
        layout="total, prev, pager, next, jumper"
        :total="trainingData.total"
        @current-change="handleCurrentChange"
      />
    </footer>
  </section>
  <TrainingDetails
    :show="showDetails"
    :detailsInfo="detailsData"
    @close="
      (value) => {
        showDetails = value;
      }
    "
  />
</template>

<script setup>
import TrainingDetails from "./component/trainingDetails.vue";
import { get_trainingList, get_trainingDetails } from "../../apis/training.js";
import { ref } from "vue";

let ip = localStorage.getItem("#server");

//宣教培训数据
let trainingData = ref({
  rows: [
    {
      createBy: "",
      createTime: "",
      declareContent: "",
      declareCover: "",
      declareDept: "",
      declareStatus: "",
      declareTitle: "",
      delFlag: 0,
      id: "",
      operationType: null,
      params: {},
      remark: "",
      searchValue: null,
      updateBy: "",
      updateTime: "",
    },
  ],
  total: 0,
});
let currentPage = ref(1);
let detailsData = ref({}); //详情数据
let showDetails = ref(false); //控制详情弹窗显隐

//获取宣教培训数据
async function getTrainingList() {
  let res = await get_trainingList({ pageNum: currentPage.value, pageSize: 15 });
  trainingData.value = res;
}
getTrainingList();

//点击获取宣教培训详情
async function handleCilckTrainingItem(id) {
  let res = await get_trainingDetails(id);
  detailsData.value = res.data;
  showDetails.value = true;
}

function handleCurrentChange() {
  getTrainingList();
}
</script>

<style lang="scss" scoped>
.training {
  height: 100%;
  background: #fff;
  padding: 2vh 1vw 4vh 1vw;
  display: flex;
  position: relative;
  .container {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 columns */
    grid-template-rows: repeat(3, 1fr); /* 3 rows */
    .title-desc {
      display: flex;
      flex-direction: column;
      .desc-container {
        flex: 1;
        padding: 10px;
        .desc {
          width: 100%;
          height: 100%;
          border: 1px solid #e2e2e2;
        }
      }
      .title {
        height: 5vh;
        background: #e2e2e2;
        text-align: center;
        line-height: 5vh;
      }
    }
    > div {
      border: 1px solid #e2e2e2;
    }
  }
  .training-footer {
    position: absolute;
    right: 1vw;
    bottom: 1vh;
  }
}
</style>
